<template>
    <div class="unitSelect">
        <el-row class="unitselect_top">
            <el-col :span="12" align='right'>
                <span>单位类型：</span>
                <el-select v-model="value" placeholder="请选择">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </el-col>
            <el-col :span="9" align='right'>
                <span>单位名称：</span>
                <el-input v-model="unitName" placeholder="请输入单位名称" style="width:320px"></el-input>
            </el-col>
            <el-col :span="3" align='right'>
                <el-button class="search_btn">搜索</el-button>
            </el-col>
        </el-row>
        <el-row class="unitselect_mid">
            <el-table
                :header-cell-style="{background:'#f5f5f5'}"
                :data="tableData"
                border
                style="width: 100%">
                <el-table-column
                type="selection"
                >
                </el-table-column>
                <el-table-column
                prop="unitType"
                label="单位类型"
                >
                </el-table-column>
                <el-table-column
                prop="unitName"
                label="单位名称"
                >
                </el-table-column>
                <el-table-column
                prop="unitAddress"
                label="单位地址">
                </el-table-column>
                <el-table-column
                prop="unitPrincipal"
                label="负责人">
                </el-table-column>
                <el-table-column
                prop="phone"
                label="联系电话">
                </el-table-column>
                <el-table-column
                prop="time"
                label="入驻时间">
                </el-table-column>
                <el-table-column
                label="操作">
                    <template slot-scope="scope">
                        <el-button
                            width="80px"
                            size="mini"
                            type="primary"
                            icon="el-icon-view"
                        >
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
        <el-row>
            <el-col class="unitselect_bottom" :span="24">
                <el-pagination
                    id="pagination"
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[10]"
                    :page-size="pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </el-col>
        </el-row>
        <el-row class="operate_btn">
            <el-col :span="24" align='right'>
                <el-button class="sure_btn">确定</el-button>
                <el-button class="back_btn">返回</el-button>
            </el-col>
        </el-row>
    </div>
</template>
<script>
export default {
    data(){
        return{
            unitName:"",
            value:"",
            currentPage:1,
            total:50,
            pagesize:10,
            options:[
                {
                    value: '1',
                    label: '施工单位'
                },
                {
                    value: '2',
                    label: '设计单位'
                },
                {
                    value: '3',
                    label: '检测单位'
                }
            ],
            tableData: [
                {
                    unitType:'施工单位',
                    unitName:'浙江省建设CXX',
                    unitAddress:'浣纱路347-1',
                    unitPrincipal:'施工',
                    phone:'1356767654',
                    time:'2018-10-1'
                },
                {
                    unitType:'施工单位',
                    unitName:'浙江省建设CXX',
                    unitAddress:'浣纱路347-1',
                    unitPrincipal:'施工',
                    phone:'1356767654',
                    time:'2018-10-1'
                }
            ],
        }
    },
    methods:{
        handleSizeChange(){

        },
        handleCurrentChange(){

        }
    },
    created(){

    }
}
</script>
<style lang="scss"  scoped>
.unitselect_top{
    padding:20px
}
.search_btn{
    width:100px;
    background:#1ABC9C;
    color:#fff
}
.unitselect_mid{
    padding:20px;
    padding-top:0px;
}
.unitselect_bottom{
    padding-bottom:20px;
    text-align:center;
}
.operate_btn{
    padding:20px;
    padding-top:0px;
}
 /deep/  #pagination .el-pager .active{
    background:#1ABC9C;
}
 /deep/  #pagination .el-pager .active:hover{
    color:#fff;
}
/deep/  #pagination .el-pager li:hover{
    color:#1ABC9C;
}
.sure_btn{
    width:80px;
    color:#fff;
    background:#1ABC9C
}
.back_btn{
    width:80px;
    color:#fff;
    background:#1ABC9C
}
</style>
